<div id="app">
    <admin-page-header back>
        <bi-button :loading="loading" @click="save" type="primary">保存</bi-button>
    </admin-page-header>

    <div class="container">
        <div class="row">
            <div class="col-12">
                <bi-card>
                    <bi-form ref="form">
                        <bi-form-item label="用户名">
                            <bi-input v-model="form.username" required placeholder="请输入用户名" :disabled="edit" />
                        </bi-form-item>
                        <bi-form-item label="昵称">
                            <bi-input v-model="form.nickname" required placeholder="请输入昵称" />
                        </bi-form-item>
                        <bi-form-item label="头像">
                            <bi-file image preview-type="square" v-model="form.photo" required  />
                        </bi-form-item>
                        <bi-form-item label="初始密码" v-if="!edit" >
                            <bi-input v-model="form.password" required placeholder="请输入初始密码,用户初次登陆时需要更改" >
                                <template #after>
                                    <bi-button @click="randomPassword" >随机</bi-button>
                                </template>
                            </bi-input>
                        </bi-form-item>
                        <bi-form-item label="管理员分组">
                            <admin-user-group v-model="form.group_id"  power="manage"  required placeholder="请输入管理员分组" ></admin-user-group>
                        </bi-form-item>
                        <bi-form-item label="权限">
                            <user-power v-model="form.power"  :group="form.group_id" v-model:extend="form.power_extend" />
                            </bi-form-item>
                    </bi-form>

                   
                </bi-card>
            </div>
        </div>
    </div>
</div>

<script>
import UserPower from 'field/user-power.vue';
    let app = admin.createApp({
        components:{
            UserPower
        },
        data(){

            let form  =  {
                username:'',
                photo:'',
                group_id:'',
                nickname:'',
                power:'',
                password:'',
                power_extend:{},
                update_at:''
            }

            let edit = false;
            if (this.$pageData.user){
                form = this.$assign(form,this.$pageData.user);
                edit = true;
            }


            return {
                edit,
                form,
                loading:false,
                groupPower:''
            }
        },
        methods:{
            save(){

                if (this.$refs.form.check()){
                    this.loading = true;
                    //TODO 没有写完
                    let data = this.form;

                    if (this.edit) data.user_id = this.$pageData.user.user_id;
                    this.$ajax({
                        url:this.$url({action:'save'}),
                        data,
                        success:(res)=>{
                            this.$toast({text:'保存成功',type:'success'},()=>{
                                this.$go(-1);
                            });
                        },
                        over:()=>{
                            this.loading = false;
                        }
                    })
                }
            },
            randomPassword(){
                this.form.password = Math.random().toString(36).substr(2, 8);
            },
            updateGroupPower(power){
                this.groupPower = power;
            }
        },
    }).mount('#app');
</script>